<include file="public@header"/>
<style type="text/css">
    .pic-list li {
        margin-bottom: 5px;
    }
    .goods_specs{
        width:60%;
        display: inline-flex;
        text-align: center;
    }
    .goods_attr{
        width:30%;
        display: inline-flex;
    }

    .goods_specs_attr_no{
        display: none;
    }
    #goods_specs_attr th,#goods_specs_attr tr,#goods_specs_attr td{
        border: 1px solid #BFE3FF;
    }
    .del_goods_specs{
        width:30px;
        height:25px;
        float:right;
    }

</style>
<script type="text/html" id="photos-item-tpl">
    <li id="saved-image{id}">
        <input id="photo-{id}" type="hidden" name="photo_urls[]" value="{filepath}">
        <input class="form-control" id="photo-{id}-name" type="text" name="photo_names[]" value="{name}"
               style="width: 200px;" title="图片名称">
        <img id="photo-{id}-preview" src="{url}" style="height:36px;width: 36px;"
             onclick="imagePreviewDialog(this.src);">
        <a href="javascript:uploadOneImage('图片上传','#photo-{id}');">替换</a>
        <a href="javascript:(function(){$('#saved-image{id}').remove();})();">移除</a>
    </li>
</script>
<script type="text/html" id="files-item-tpl">
    <li id="saved-file{id}">
        <input id="file-{id}" type="hidden" name="file_urls[]" value="{filepath}">
        <input class="form-control" id="file-{id}-name" type="text" name="file_names[]" value="{name}"
               style="width: 200px;" title="文件名称">
        <a id="file-{id}-preview" href="{preview_url}" target="_blank">下载</a>
        <a href="javascript:uploadOne('文件上传','#file-{id}','file');">替换</a>
        <a href="javascript:(function(){$('#saved-file{id}').remove();})();">移除</a>
    </li>
</script>
</head>
<body>
<div class="wrap js-check-wrap">
    <ul class="nav nav-tabs">
        <li><a href="{:url('ShopGoods/index')}">商品列表</a></li>
        <li class="active"><a href="#">商品编辑</a></li>
    </ul>
    <form action="{:url('ShopGoods/editPost')}" method="post" class="form-horizontal js-ajax-form margin-top-20">
        <div class="row">
            <div class="col-md-9">
                <table class="table table-bordered">
                    <tr>
                        <th width="100">标题<span class="form-required">*</span></th>
                        <td>
                            <input type="hidden" name="id" value="{$post.id}">
                            <input class="form-control" type="text" name="title" required  placeholder="请输入标题" value="{$post.title}"/>
                        </td>
                    </tr>
                    <tr>
                        <th>是否上架</th>
                        <td>
                            <select class="form-control" name="is_shelf" style="width:200px;">
                                <foreach name="is_shelf" item="vo" key="key">
                                    <option value="{$key}" <eq name="$key" value="$post.is_shelf">selected</eq>>{$vo}</option>
                                </foreach>
                            </select>
                        </td>
                    </tr>
                    <tr>
                        <th>是否热门</th>
                        <td>
                            <select class="form-control" name="is_hot" style="width:200px;">
                                <foreach name="is_hot" item="vo" key="key">
                                    <option value="{$key}" <eq name="$key" value="$post.is_hot">selected</eq>>{$vo}</option>
                                </foreach>
                            </select>
                        </td>
                    </tr>
                    <tr>
                        <th>轮播图<span class="form-required">*</span></th>
                        <td>
                            <ul id="photos" class="pic-list list-unstyled form-inline">
                                <notempty name="post.images">
                                    <foreach name="post.images" item="vo">
                                        <php>$img_url=cmf_get_image_preview_url($vo);</php>
                                        <li id="saved-image{$key}">
                                            <input class="form-control" id="photo-{$key}" type="text" name="photo_urls[]" value="{$vo}">
                                            <img id="photo-{$key}-preview"
                                                 src="{:cmf_get_image_preview_url($vo)}"
                                                 style="height:36px;width: 36px;"
                                                 onclick="parent.imagePreviewDialog(this.src);">
                                            <a href="javascript:uploadOneImage('图片上传','#photo-{$key}');">替换</a>
                                            <a href="javascript:(function(){$('#saved-image{$key}').remove();})();">移除</a>
                                        </li>
                                    </foreach>
                                </notempty>
                            </ul>
                            <a href="javascript:uploadMultiImage('图片上传','#photos','photos-item-tpl');"
                               class="btn btn-default btn-sm">选择图片</a>
                        </td>
                    </tr>
                    <tr>
                        <th>内容<span class="form-required">*</span></th>
                        <td>
                            <script type="text/plain" id="content" name="content">{$post.content}</script>
                        </td>
                    </tr>
                    <tr>
                        <th>排序</th>
                        <td>
                            <input class="form-control" type="number" required name="sort" min="0" value="{$post.sort}"/>
                        </td>
                    </tr>

                    <tr>
                        <th>商品类型<span class="form-required">*</span></th>
                        <td>
                            <select class="form-control" name="shop_id" id="shop_id" style="width:200px;">
                                <option value="">请选择类型</option>
                                <foreach name="shop_category" item="vo" key="key">
                                    <option value="{$key}" <eq name="$key" value="$post.shop_id">selected</eq>>{$vo}</option>
                                </foreach>
                            </select>
                        </td>
                    </tr>
                    <tr>
                        <th>规格类型<span class="form-required">*</span></th>
                        <td>
                            <input type="radio" name="is_specs" checked value="0" <eq name="0" value="$post.is_specs">checked</eq>/>无
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            <input type="radio" name="is_specs" value="1" <eq name="1" value="$post.is_specs">checked</eq>/>通用规格
                        </td>
                    </tr>
                    <tr>
                        <th>样式<span class="form-required">*</span></th>
                        <td>
                            <a class="btn btn-default" id="add_specs">添加一个样式</a>
                        </td>
                    </tr>
                    <tr class="goods_specs_yes goods_specs_no">
                        <th>价格</th>
                        <td>
                            <input class="form-control" type="number" name="price" min="0" placeholder="请输入商品价格" value="{$post.min_price}"/>
                        </td>
                    </tr>
                    <tr class="goods_specs_yes goods_specs_no">
                        <th>库存</th>
                        <td>
                            <input class="form-control" type="number" name="stock" min="0" placeholder="请输入商品库存" value="{$post.min_stock}"/>
                        </td>
                    </tr>

                    <!--移除关联规格ids-->
                    <input type="hidden" name="del_relation_ids" id="del_relation_ids">

                    <input type="hidden" id="change_specs" value="{$post.shop_id}">
                    <table class="table table-hover table-bordered goods_specs_attr_no" id="goods_specs_attr">
                        <if condition="$post.is_specs == 1">
                            <volist name="$post.shop_relation_many" id="vo" key="k">
                                <tr class="style_num" id="{$k}">
                                    <th style="color:#18BC9C">样式编号{$k}</th>
                                    <td>
                                        <input type="hidden" name="relation_id[{$k}]" value="{$vo.id}">
                                        <a class="form-control btn btn-danger btn-sm glyphicon glyphicon-remove del_goods_specs"></a>
                                    </td>
                                </tr>

                                <tr>
                                    <th width="100">规格</th>
                                    <td>
                                        <volist name="$vo.specs_attr" id="voo">
                                            <input type="hidden" name="specs_id[{$k}][]" value="{$voo.specs_id}">
                                            <input class="form-control goods_specs" type="text" disabled="disabled" value="{$voo.specs_name}">
                                            <select class="form-control goods_attr valid" name="attr_id[{$k}][]" aria-invalid="false">
                                                <volist name="$voo.attr_many" id="voo_o">
                                                    <option value="{$voo_o.id}" <eq name="$voo_o.id" value="$voo.attr_id">selected</eq>>{$voo_o.attr_name}</option>
                                                </volist>
                                            </select>
                                        </volist>
                                    </td>
                                </tr>

                                <tr>
                                    <th>价格</th>
                                    <td>
                                        <input class="form-control" type="number" name="min_price[{$k}]" min="0" placeholder="请输入商品价格" value="{$vo.goods_coin}"/>
                                    </td>
                                </tr>

                                <tr>
                                    <th>库存</th>
                                    <td>
                                        <input class="form-control" type="number" name="min_stock[{$k}]" min="0" placeholder="请输入商品库存" value="{$vo.stock}"/>
                                    </td>
                                </tr>
                            </volist>

                        </if>
                    </table>

                </table>
                <div class="form-group">
                    <div class="col-sm-offset-2 col-sm-10">
                        <button type="submit" class="btn btn-primary js-ajax-submit">{:lang('SAVE')}</button>
                        <a class="btn btn-default" href="{:url('ShopGoods/index')}">{:lang('BACK')}</a>
                    </div>
                </div>
            </div>


            <div class="col-md-3">
                <table class="table table-bordered">
                    <tr>
                        <th>封面图<span class="form-required">*</span></th>
                    </tr>
                    <tr>
                        <td>
                            <div style="text-align: center;">
                                <input type="hidden" name="thumbnail" id="thumbnail" value="{$post.thumbnail|default=''}">
                                <a href="javascript:uploadOneImage('图片上传','#thumbnail');">
                                    <if condition="empty($post.thumbnail)">
                                        <img src="__TMPL__/public/assets/images/default-thumbnail.png"
                                             id="thumbnail-preview"
                                             width="135" style="cursor: pointer"/>
                                        <else/>
                                        <img src="{:cmf_get_image_preview_url($post.thumbnail)}"
                                             id="thumbnail-preview"
                                             width="135" style="cursor: pointer"/>
                                    </if>
                                </a>
                                <input type="button" class="btn btn-sm btn-cancel-thumbnail" value="取消图片">
                            </div>
                        </td>
                    </tr>
                </table>
            </div>
        </div>
    </form>
</div>
<script type="text/javascript" src="__STATIC__/js/admin.js"></script>
<script type="text/javascript">
    //编辑器路径定义
    var editorURL = GV.WEB_ROOT;
</script>
<script type="text/javascript" src="__STATIC__/js/ueditor/ueditor.config.js"></script>
<script type="text/javascript" src="__STATIC__/js/ueditor/ueditor.all.min.js"></script>
<script type="text/javascript">
    $(function () {

        editorcontent = new baidu.editor.ui.Editor();
        editorcontent.render('content');
        try {
            editorcontent.sync();
        } catch (err) {
        }

        $('.btn-cancel-thumbnail').click(function () {
            $('#thumbnail-preview').attr('src', '__TMPL__/public/assets/images/default-thumbnail.png');
            $('#thumbnail').val('');
        });

        //加载页面
        var is_specs = "{$post.is_specs}";
        show(is_specs);

        //radio事件
        $('input[type=radio]').change(function() {
            var check = $(this).val();
            show(check);
        });

        //商品类型联动
        $('#shop_id').on('change',function(){
            var shop_id = $(this).children('option:selected').val();
            $('#goods_specs_attr').html('');
            ajaxData(shop_id,0);
        });

        //添加样式
        $('#add_specs').on('click',function(){
            var shop_id = $('#change_specs').val();
            ajaxData(shop_id,1);
        });

        //移除样式
        $(document).on('click','.del_goods_specs',function(){
            //获取当前关联relation_id
            var relation_id = $(this).prev('input').val();
            //获取del_relation_ids的值
            var relation_ids = $('#del_relation_ids').val();
            if(relation_id != ''){
                relation_ids = relation_ids.split(',')
            }else{
                relation_ids = [];
            }
            if(relation_id != undefined){
                //更新del_relation_ids
                relation_ids.push(relation_id);
                $('#del_relation_ids').val(relation_ids);
            }
            //移除元素
            for(var i=0;i<3;i++){
                $(this).parent('td').parent('tr').next().remove();
            }
            $(this).parent('td').parent('tr').remove();
        });
    });

    //规格类型显示隐藏
    function show(check){
        if(check == 0){
            //有规格
            $('#goods_specs_attr').addClass('goods_specs_attr_no');
            $('#goods_specs_attr').css('display','none');
            //无规格
            $('.goods_specs_yes').removeClass('goods_specs_no');
            $('.goods_specs_yes').removeAttr('style');
        }else{
            $('#goods_specs_attr').removeAttr('style');
            $('#goods_specs_attr').removeClass('goods_specs_attr_no');

            $('.goods_specs_yes').addClass('goods_specs_no');
            $('.goods_specs_no').css('display','none');
        }
    }

    //ajax获取数据
    function ajaxData(shop_id,flag){
        $.ajax({
            type: 'GET',
            url: "/admin/shop_goods/getSpecsAttr",
            data: {
                'shop_id': shop_id,
            },
            dataType: 'json',
            success: function(data) {
                console.log(data);
                var html = appendHtml(data);
                if(flag == 1){
                    $('#goods_specs_attr').append(html);
                }else{
                    $('#goods_specs_attr').html(html);
                    $('#change_specs').val(shop_id);
                }
            }
        });
    }

    //动态添加样式
    function appendHtml(data) {
        //获取最后一个tr
        var last = $('#goods_specs_attr').children('tbody').children('.style_num').last().attr('id');
        if(last == undefined){
            last = 1;
        }else{
            last = Number(last)+1;
        }

        var html = '';
        if(data.length != 0){
            html +='<tr class="style_num" id="'+last+'">';
            html +='<th style="color:#18BC9C">样式编号'+last+'</th>';
            html +='<td>';
            html +='<a class="form-control btn btn-danger btn-sm glyphicon glyphicon-remove del_goods_specs"></a>';
            html +='</td>';
            html +='</tr>';

            html +='<tr>';
            html +='<th width="100">规格</th>';
            html +='<td>';
            $.each(data,function(i,val){
                html +='<input type="hidden" name="specs_id['+last+'][]" value="'+val['id']+'">';
                html +='<input class="form-control goods_specs" type="text" disabled="disabled" value="'+val['specs_name']+'">';
                html +='<select class="form-control goods_attr valid" name="attr_id['+last+'][]" aria-invalid="false">';
                $.each(val['attr_many'],function(index,value){
                    html +='<option value="'+value['id']+'">'+value['attr_name']+'</option>';
                });
                html +='</select>';
            });
            html +='</td>';
            html +='</tr>';

            html +='<tr>';
            html +='<th>价格</th>';
            html +='<td>';
            html +='<input class="form-control" type="number" name="min_price['+last+']" min="0" placeholder="请输入商品价格" value="0"/>';
            html +='</td>';
            html +='</tr>';

            html +='<tr>';
            html +='<th>库存</th>';
            html +='<td>';
            html +='<input class="form-control" type="number" name="min_stock['+last+']" min="0" placeholder="请输入商品库存" value="0"/>';
            html +='</td>';
            html +='</tr>';
        }
        return html;
    }
</script>
</body>
</html>
